import React, { useState } from 'react'
import { View, Button, Text, StyleSheet } from 'react-native'
import { avatarUri } from '../../constants/Uri'
import Divide from '../../../src/commonComponents/divide'

import InfoView_func_com from './14_1InfoView_reactMemo'
import InfoView2_class_com from './14_1InfoView_shouldUpdate_classCom'
// import ConsumeList from './14_2useMemo缓存计算结果&缓存ui&useCallback_ConsumeList'  // 在app.jsx里
// import ConsumeList from './ConsumeList';

export default function index() {
  const [info, setInfo] = useState<UserInfo>({
    avatar: '',
    name: '',
    desc: ''
  })
  const userInfo = {
    avatar: avatarUri,
    name: '尼古拉斯·段坤',
    desc: '各位产品经理大家好，我是个人开发者段坤，我学习RN两年半了，我喜欢安卓、RN、Flutter，Thank you!。'
  };
  return (
    <View style={{ width: '100%' }}>
      <Divide isBig>
        <Text
          style={{
            textAlign: 'center',
            backgroundColor: '#ddd',
            color: 'red'
          }}>
          14_2使用useMemo缓存计算结果
        </Text>
      </Divide>

      <Button
        title="按钮"
        onPress={() => {
          setInfo(userInfo)
        }}
      />
      {/*问题： 这个组件不断的改变info这个对象的地址，实际内容不变但是还是会触发render
        修改：函数式使用react.memo */}
      <InfoView_func_com info={info} />

      <Divide />
      {/*   修改：class组件使用shouldComponentUpdate  */}
      <InfoView2_class_com info={info} />

      <Divide isBig>
        <Text
          style={{
            textAlign: 'center',
            backgroundColor: '#ddd',
            color: 'red'
          }}>
          14_2使用useMemo缓存计算结果_缓存ui以及useCallback缓存回调 in app.jsx
        </Text>
      </Divide>
    </View>
  )
}

const styles = StyleSheet.create({})
